<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的显示与隐藏</title>
    <style>
      /* display属性*/
      .peppa {
        /* 隐藏元素 */
        /* display: none; */
        /* 显示元素 */
        /* display: block; */
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .george {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      /*visibility可见性*/
      .temp1 {
        /* 隐藏元素 */
        /* visibility: hidden; */
        /* 显示元素 */
        /* visibility: visible; */
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
      .temp2 {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
      }
      /* overflow溢出 */
      .ying {
        /* 显示元素 */
        /* overflow: visible; */
        /* 隐藏元素 */
        /* overflow: hidden; */
        /* scroll 溢出的部分显示滚动条 ，不溢出的时候也显示滚动条*/
        /* overflow: scroll; */
        /* auto 溢出的时候才显示滚动条，不溢出的时候不显示滚动条 */
        overflow: auto;
        width: 200px;
        height: 200px;
        border: 3px solid pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <!-- 
        类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现
        本质：让一个元素在页面中隐藏或者显示
        display属性
          display:none; 隐藏对象
          display:block; 除了转换为块级元素外，同时还有显示元素的意思
          display隐藏元素后，不再占有原来的位置。
          后面应用及其广泛，搭配js可以做很多的网页特效
        
        visibility可见性
          visibility:visible;元素可视
          visibility:hidden;元素隐藏
          visibility隐藏元素后，继续占有原来的位置

        overflow溢出

     -->

    <!-- <h3>display属性</h3>
    <div class="peppa">佩奇</div>
    <div class="george">乔治</div> -->

    <!-- <h3>visibility可见性</h3>
    <div class="temp1"></div>
    <div class="temp2"></div> -->

    <h3>overflow溢出</h3>
    <div class="ying">
      影和雷电将军关系是共用一个肉身。首先雷电将军是个人偶，雷电影是巴尔泽布，
      并非同一个人，千年前影把自己的肉身做成了雷电将军，而她自己的意识则进入一方净土避免磨损，
      平时的雷电将军就是个人偶，于坚守自己当初永恒的理念，卡池抽到的雷电将军，实就是影，而不是人偶。
    </div>
  </body>
</html>
